<!-- 22 create by hxg 2021/12/13  -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="getList">{{ $t('common_query') }}</a-button>
    </a-space>
    <t-query-form layout="inline"
      ref="queryForm"
      group="RecipeParameterSettingChild"
      :model="queryForm">
      <a-row
        :gutter="[16, 0]"
      >
       <a-col :span="6">
          <a-form-item :label="$t('T9_shopId')" name="shopId" prop="shopId" :rules="{ required: true, message: $t('T9_shopId'), trigger: 'change'}">
            <a-select v-model:value="queryForm.shopId" class="select-width" @change="changeShopId">
              <a-select-option v-for="item in shopIdArr"
              :key="item.shopId" :value="item.shopId">
              {{item.shopId}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
         <a-col :span="6">
        <a-form-item :label="$t('T9_bayId')" name="bayId" prop="bayId" :rules="{ required: true, message: $t('T9_bayId'), trigger: 'change'}">
            <a-select v-model:value="queryForm.bayId" class="select-width" @change="changeBayId">
              <a-select-option v-for="item in bayIdArr"
              :key="item.bayId" :value="item.bayId">
              {{item.bayId}}
              </a-select-option>
            </a-select>
          </a-form-item>
          </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_eqpId')" name="eqpId" prop="eqpId" :rules="{ required: true, message: $t('T9_eqpId'), trigger: 'change'}">
            <a-select v-model:value="queryForm.eqpId" class="select-width" @change="getPortIdList">
              <a-select-option v-for="item in eqpIdArr"
              :key="item.eqpId" :value="item.eqpId">
              {{item.eqpId}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
       <a-col :span="6">
          <a-form-item :label="$t('T9_recipeName')" name="recipeName" prop="recipeName">
            <a-select v-model:value="queryForm.recipeName" class="select-width">
              <a-select-option v-for="item in recipeNameArr"
              :key="item" :value="item">
              {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
       <a-col :span="6">
          <a-form-item :label="$t('T9_productType')" name="productType" prop="productType">
            <a-select v-model:value="queryForm.productType" class="select-width">
              <a-select-option v-for="item in productTypeArr"
              :key="item.enumValue" :value="item.enumValue">
              {{item.enumValue}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_productId')" name="productId" prop="productId">
            <a-select v-model:value="queryForm.productId" class="select-width">
              <a-select-option v-for="item in productIdArr"
              :key="item.productId" :value="item.productId">
              {{item.productId}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <div class="tableArea">
      <div class="left">
 <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-2">
      <a-col :span="6" class="global-oper-row-title">{{ $t('T9_ppidList') }}</a-col>
       <a-col :span="4" class="global-oper-row-extra">
        <a-button type='primary'>{{ $t('t9_getParameter') }}</a-button>
      </a-col>
      <a-col :span="4" class="global-oper-row-extra">
        <a-button type='primary'>{{ $t('t9_toExcel') }}</a-button>
      </a-col>
    </a-row>
      <t-table
      :data="table.ppidList"
      class="mytable-style"
          :cell-class-name="cellClassName"
    >
      <t-column field="eqpId" :title="$t('T9_eqpId')" />
      <t-column field="productId" :title="$t('T9_productId')" />
      <t-column field="desc" :title="$t('T9_desc')" />
      <t-column field="recipeName" :title="$t('T9_recipeName')" />
      <t-column field="ifMode" :title="$t('T9_ifMode')" />
      <t-column field="keyReg" :title="$t('T9_keyReg')" />
      <t-column field="keySet" :title="$t('T9_keySet')" />
      <t-column field="paraSet" :title="$t('T9_paraSet')" />
      <t-column field="ppid" :title="$t('T9_ppid')" />
      <t-column field="maskName" :title="$t('T9_maskName')" />
      <t-column field="mask2" :title="$t('T9_mask2')" />
    </t-table>
      </div>
      <div class="center">
                <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-2">
      <a-col :span="12" class="global-oper-row-title">
        <div class="inputArea">
       <span class="name">{{$t('T9_parameterList')}}</span>
        <a-input class="value" v-model:value="parameterValue" width="20" />
        </div>
      </a-col>
       <a-col :span="3" class="global-oper-row-extra">
        <a-button type='primary'>{{ $t('t9_filter') }}</a-button>
      </a-col>
      <a-col :span="3" class="global-oper-row-extra">
        <a-button type='primary'>{{ $t('t9_tempalte') }}</a-button>
      </a-col>
      <a-col :span="3" class="global-oper-row-extra">
        <a-button type='primary'>{{ $t('t9_import') }}</a-button>
      </a-col>
      <a-col :span="43" class="global-oper-row-extra">
        <a-button type='primary'>{{ $t('t9_toExcel') }}</a-button>
      </a-col>
    </a-row>
    <t-table
      :data="table.parameterList"
      class="mytable-style"
          :cell-class-name="cellClassName"
    >
      <t-column field="recipeName" :title="$t('T9_recipeName')" />
      <t-column field="paramName" :title="$t('T9_paramName')" />
      <t-column field="dataType" :title="$t('T9_dataType')"/>
      <t-column field="validationType" :title="$t('T9_validationType')" />
      <t-column field="target" :title="$t('T9_target')" />
      <t-column field="lowerLimit" :title="$t('T9_lowerLimit')" />
      <t-column field="upperLimit" :title="$t('T9_upperLimit')" />
      <t-column field="tracelevel" :title="$t('T9_tracelevel')" />
      <t-column field="subUnitId" :title="$t('T9_subUnitId')" />
      <t-column field="subrecipeId" :title="$t('T9_subrecipeId')" />
      <t-column field="paramOriented" :title="$t('T9_paramOriented')" />
    </t-table>
      </div>
      <div class="right">
         <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-2">
       <a-col :span="10" class="global-oper-row-title">{{ $t('T9_keyParameterList') }}</a-col>
       <a-col :span="8" class="global-oper-row-extra">
       <a-button type='primary'>{{ $t('t9_toExcel') }}</a-button>
       </a-col>
    </a-row>
    <t-table
      :data="table.keyParameterList"
      class="mytable-style"
          :cell-class-name="cellClassName"
    >
      <t-column field="parameterName" :title="$t('T9_parameterName')" />
    </t-table>
      </div>
    </div>
    <div class="btnArea">
      <a-button type="primary">{{$t('T9_crossCheck')}}</a-button>
      <a-button type="primary" style="margin-left:10px">{{$t('T9_parameterTest')}}</a-button>
    </div>
     <t-query-form layout="inline"
      ref="dataForm"
      :model="dataForm"
      class="footQueryForm"
      >
        <a-row
        :gutter="[16, 0]"
      >
       <a-col :span="24">
          <a-form-item :label="$t('T9_comment')" name="comment" prop="comment" :rules="{ required: true, message: $t('T9_comment'), trigger: 'change'}">
            <a-input v-model:value="dataForm.comment" />
          </a-form-item>
        </a-col>
        </a-row>
      </t-query-form>
      <div class="footBtn">
         <a-button type="primary">{{$t('T9_confirm')}}</a-button>
      </div>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import {
    getShopId,
    getBayId,
    getEqpId,
    getProductType,
    getProductId,
    getList
  } from '@/api/common'

  export default defineComponent({
    name: 'RecipeParameterSettingChild',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        table: {
          ppidList: [],
          parameterList: [],
          keyParameterList: []
        },
        shopIdArr: [],
        bayIdArr: [],
        eqpIdArr: [],
        recipeNameArr: [],
        productTypeArr: [],
        productIdArr: [],
        queryForm: {
          productType: '',
          productId: ''
        },
        dataForm: {
          runState: '',
          waitState: '',
          others: ''
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getProductType()
    },
    methods: {
      getProductType() {
        getProductType().then(res => {
          this.productTypeArr = res
        })
      },
      cellClassName(row) {
        if (row.column.property === 'sumTitle') {
          return 'col-gray'
        }
        return ''
      },
      changeProductType() {
        const params = {
          shopId: 'CELL',
          productType: this.queryForm.productType
        }
        getProductId(params).then((res) => {
          this.productIdArr = res
        })
      },
      getList() {
        const obj = {
          dtoName: 'ViewWipByOperationOperationListDTO',
          processGroupType: 'Box',
          processState: 'Released',
          productId: '',
          productType: this.queryForm.productType,
          productVer: '',
          queryId: 'GetProcessGroupList',
          shopId: 'CELL',
          version: '80018',
          menuName: 'viewWipByOperationBoxPallet',
          usage: 'getOperationList'
        }
        getList(obj).then(res => {
          this.table.operationList = res.viewWipByOperationOperationListDTOList
          const arr = ['operation', 'ship', 'total']
          arr.forEach((it, index) => {
            this.table.boxPalletList[index].box = res[`${it}Box`]
            this.table.boxPalletList[index].pallet = res[`${it}Pallet`]
            this.table.boxPalletList[index].panel = res[`${it}Panel`]
          })
        })
        const params = {
          dtoName: 'ViewWipByOperationBoxInfoListDTO',
          processGroupType: 'Box',
          processState: 'Released',
          productId: '',
          productType: this.queryForm.productType,
          productVer: '',
          queryId: 'GetProcessGroupList',
          shopId: 'CELL',
          version: '81014',
          route: 'CJ645001',
          operation: '9990',
          menuName: 'viewWipByOperationBoxPallet',
          usage: 'getBoxList'
        }
        getList(params).then(res => {
          this.table.boxList = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
/deep/ .ant-row, .ant-row:after, .ant-row:before {
    display: flex;
    flex: 1;
}
/deep/.mytable-style{
.vxe-body--column.col-gray {
          background-color: #d8def5;
          color: rgba(4,12,44,.65);
        }
}
.endBtnArea{
  justify-content: flex-end!important;
  .endBtn{
    margin-right: 10px;
  }
}
.footQueryForm{
  margin-top: 10px;
}
.tableArea{
  width: 99.9%;
  min-height: 10vh;
  height: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 10px;
  .left{
    width: 30%;
    height: 100%;
  }
  .center{
    width: 45%;
    height: 100%;
  }
  .right{
    width: 22%;
    height: 100%;
  }
  /deep/ .global-oper-row{
    border: none;
  }
}
.inputArea{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .name{
    display: inline-block;
    width: 35%!important;
  }
  .value{
    width: 60%!important;
  }
}
.btnArea{
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footBtn{
  width: 99.9%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
